<html>  
  <head>  
        <meta charset="utf-8">  
        <title>7.3 散点图的过渡</title>  
  </head> 
  <style>
  
.axis path,
.axis line{
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}
 
.axis text {
	font-family: sans-serif;
	font-size: 11px;
}

  </style>
<body>

<script src="../../d3/d3.min.js" charset="utf-8"></script> 
<script>  

//圆心数据
var center = [[0.5,0.5],[0.7,0.8],[0.4,0.9],[0.11,0.32],[0.88,0.25],
			   [0.75,0.12],[0.5,0.1],[0.2,0.3],[0.4,0.1],[0.6,0.7]];		   

var width  = 500;	//SVG绘制区域的宽度
var height = 500;	//SVG绘制区域的高度
	
var svg = d3.select("body")			//选择<body>
			.append("svg")			//在<body>中添加<svg>
			.attr("width", width)	//设定<svg>的宽度属性
			.attr("height", height);//设定<svg>的高度属性
			
//外边框
var padding = { top: 30 , right: 30, bottom: 30, left: 30 };
			
//x轴宽度
var xAxisWidth = 300;

//y轴宽度
var yAxisWidth = 300;
			
//x轴比例尺
var xScale = d3.scale.linear()
				.domain([0, 1])
				.range([0,xAxisWidth]);

//y轴比例尺
var yScale = d3.scale.linear()
				.domain([0, 1])
				.range([0,yAxisWidth]);			
				

drawCircle();
drawAxis();				
				
				
function drawCircle(){
	var circleUpdate = svg.selectAll("circle")
						.data(center);		//绑定数据
						
	var circleEnter = circleUpdate.enter();

	var circleExit = circleUpdate.exit();
	
	
	circleUpdate.transition()				//更新数据时启动过渡
				.duration(500)
				.attr("cx", function(d){	//新的x坐标
					return padding.left + xScale(d[0]);
				})
				.attr("cy", function(d){	//新的y坐标
					return height- padding.bottom - yScale(d[1]);
				});
				
	circleEnter.append("circle")			//添加元素
				.attr("fill","black")		
				.attr("cx", padding.left)				//过渡前的x坐标
				.attr("cy", height- padding.bottom)		//过渡前的y坐标
				.attr("r", 7 )
				.transition()				//启动添加元素时的过渡
				.duration(500)				//设定过渡时间
				.attr("cx", function(d){	//过渡后的x坐标
					return padding.left + xScale(d[0]);
				})
				.attr("cy", function(d){	//过渡后的y坐标
					console.log(d[1] + " " + yScale(d[1]));
					return height- padding.bottom - yScale(d[1]);
				});
				
	circleExit.transition()				//删除数据时启动过渡
				.duration(500)			//时间为500ms
				.attr("fill","white")	//设定过渡目标
				.remove();
}


function drawAxis(){

	var xAxis = d3.svg.axis()
				.scale(xScale)
				.orient("bottom")
				.ticks(5);

	yScale.range([yAxisWidth,0]);
					
	var yAxis = d3.svg.axis()
					.scale(yScale)
					.orient("left")
					.ticks(5);
					
	svg.append("g")
			.attr("class","axis")
			.attr("transform","translate(" + padding.left + "," + (height - padding.bottom) +  ")")
			.call(xAxis);
				
	svg.append("g")
			.attr("class","axis")
			.attr("transform","translate(" + padding.left + "," + (height - padding.bottom - yAxisWidth) +  ")")
			.call(yAxis); 
			
	yScale.range([0,yAxisWidth]);
}


function update(){
	for(var i=0;i<center.length;i++){
		center[i][0] = Math.random();
		center[i][1] = Math.random();
	}
	drawCircle();
}

function add(){
	center.push( [ Math.random() , Math.random() ] );
	drawCircle();
}

function sub(){
	center.pop();
	drawCircle();
}

</script> 

<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button type="button" onclick="update()">   更新  </button>
<button type="button" onclick="add()">   增加  </button>
<button type="button" onclick="sub()">   减少  </button>
</body>

</html>  